<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历控件</title>
    <style>
        input{
            border: 1px solid green;
            height: 33px;
            width: 180px;
            border-radius: 10px;
        }
        button{
            background-color: green;
            color: white;
            border: 0px;
            height: 35px;
            border-radius: 10px;
            width: 100px;
        }
        table{
            margin: auto;
            
        }
        table,th,td{
            border-collapse: collapse;
            border: 1px solid #999;
           
        }
        th,td{
            height: 30px;
            width: 75px;
        }

        #calendar{
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div id="outer" style="text-align: center;">
        <input type="text" id="year" placeholder="请你输入年份">
        <input type="text" id="month" placeholder="请你输入月份">
        <button type="button" onclick="calendar_print()">显示日历</button>

        <div id="calendar">

        </div>
    </div>

    <script>
        function calendar_print(){
            let c_div = document.getElementById("calendar");

            //获取俩个文本框中输入的数据
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;

            //1.调用自定义的函数 - 获取某年某月的一个最大天数
            let max_days = get_max_days(year,month);

            //2.今天是几号需要高亮显示一下 - 今天是几号
            let now_day = new Date().getDate();

            //3.指定的年月日的1号是周几.
            let date = new Date();
            //重新设置这个日期
            date.setFullYear(year);
            date.setMonth(month-1);
            date.setDate(1);
            //周日 - 0,周一 ~ 周六  1~6
            let week = date.getDay();

            //定义一个字符串 - 用来拼接表格
            let str = "<table>";
            str+="<tr>";
            str+="<th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>"
            str+="</tr>";

            str+="<tr>";

            //定义一个变量 - 用来控制换行
            let count = 0;

            //假设week=3
            for(let i=0;i<week;i++){
                str+="<td></td>";
                count++;
            }

            for(let i=1;i<=max_days;i++){
                if(i==now_day){
                    str+="<td style='background-color:red;color:white'>"+i+"</td>";
                }else{
                    str+="<td>"+i+"</td>";
                }
                
                count++;
                if(count == 7){
                    str+="</tr>";
                    str+="<tr>";
                    count = 0;
                }
            }

            str += "</table>";

            c_div.innerHTML = str;
        }

        //定义一个函数 - 判断给定的年份是否为闰年
        //1. 能直接被400整除的
        // || 或者
        //2. 能够被4整除但是不能被100整除的
        function isLeapYear(year){
            return (year%400==0) || (year%4==0 && year%100!=0);
        }

        //3. 判断某年某月的最大天数
        function get_max_days(year,month){
            //编程从定义变量开始
            let days = -1;

            if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)
                days = 31;
            else if(month==2){
                days = 28;
                if(isLeapYear(year))
                    days++;
            }else{
                days = 30;
            }
            return days;
        }
        
    </script>
</body>
</html>